<template>
  <li class="item">
    <button
      class="btn"
      :class="{ actived: activeDetect(routeName) }"
      @click="routeTo(routeName)"
    >
      <i class="icon" :class="iconName"></i>
      <span class="text">{{ title }}</span>
    </button>
  </li>
</template>

<script>
export default {
  name: "",
  data() {
    return {};
  },
  props: {
    routeName: {
      type: String,
      required: true,
    },
    title: {
      type: String,
      required: true,
    },
    iconName: {
      type: String,
      default:''
    }
  },
  methods: {
    activeDetect(name) {
      let result = false;
      if (this.$route.name.includes(name)) {
        result = true;
      }
      return result;
    },
    routeTo(name) {
      this.$router.push({
        name: name,
      });
    },
  },
};
</script>

<style lang="" scoped>
</style>